//批量支付
import { CommonModal } from "@/pages/OrderModule/common/components/CommonModal";
import SubTitle from "@/pages/OrderModule/common/components/SubTitle";
import CommonInput from "@/pages/OrderModule/common/components/CommonInput";
import CommonLoading from "@/components/CommonLoading";
import GoPay from "./GoPay";
import { useState, useEffect } from "react";
import { batchPayView, allPay } from "../../../../services";
import { Alert, Form, Typography, Row, Col, Button } from "antd";

const AllPayModal = ({ selectKeys, handleOk, handleCancel }) => {

	const [payData, setPayData] = useState({}); //全部支付预览
	const [visible, setVisible] = useState(false); //温馨提示
	const [loading, setLoading] = useState(false);

	const {
		goodsTotalPrice,
		orderTotalPrice,
		payMenTotalPrice,
		balanceTotalPrice,
		freightTotalPrice,
		serviceTotalPrice,
		packTotalPrice,
		orderCount,
		goodsCount
	} = payData;

	useEffect(() => {
		getAllPayView();
	}, []);

	//获取全部支付预览
	const getAllPayView = async () => {
		setLoading(true);
		const { success, data = {} } = await batchPayView(selectKeys);
		if (success) {
			setPayData(data);
		}
		setLoading(false);
	};

	const onOk = () => {
		setVisible(true);
	};

	//支付方式弹窗
	const goPayProps = {
		visible,
		selectKeys,
		data: payData,
		handleCancel() {
			setVisible(false);
		},
		handleOk() {
			setVisible(false);
			handleOk();
		}
	};

	return (
		<CommonModal
			footer={[
				<Button key="save" onClick={handleCancel}>
					取消
				</Button>,
				<Button key="ok" onClick={onOk} type="primary">
					去支付
				</Button>
			]}
			title={{ title: "批量支付" }}
			open={true}
			width="530px"
			onOk={onOk}
			onCancel={handleCancel}
		>
			<Alert showIcon message={<Typography as="s1">注：代发订单运费会发货称重时进行多退少补</Typography>} />
			<SubTitle symbol as="s2" title="订单明细" wrapStyle={{ marginBottom: 16, marginTop: 16 }} />
			<Row style={{ marginTop: 16, color: "#333" }} gutter={40}>
				<Col>
					<div>订单数：{orderCount}</div>
				</Col>
				<Col>
					<div>商品数：{goodsCount}</div>
				</Col>
			</Row>
			<SubTitle symbol as="s2" title="金额明细" wrapStyle={{ marginBottom: 16, marginTop: 16 }} />
			<Row style={{ marginTop: 16, color: "#333" }} gutter={40}>
				<Col>
					<div>商品总额：¥ {goodsTotalPrice}</div>
				</Col>
				<Col>
					<div>运费：¥ {freightTotalPrice}</div>
				</Col>
				<Col>
					<div>服务费：¥ {serviceTotalPrice}</div>
				</Col>
			</Row>
			<Row style={{ marginTop: 16, color: "#333" }} gutter={40}>
				<Col>
					<div>包材费：¥ {packTotalPrice}</div>
				</Col>
				<Col>
					<div>订单总额：¥ {orderTotalPrice}</div>
				</Col>
			</Row>
			<Row style={{ marginTop: 16, color: "#333" }} gutter={40}>
				<Col>
					<div>
						账期应付： <span className="common-color9">¥ {payMenTotalPrice}</span>
					</div>
				</Col>
				<Col>
					<div>
						余额应付： <span className="common-color9">¥ {balanceTotalPrice}</span>{" "}
					</div>
				</Col>
			</Row>
			{visible && <GoPay {...goPayProps} />}
			<CommonLoading loading={loading} />
		</CommonModal>
	);
};

export default AllPayModal;
